<template>
  <view class="container">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar height="50" title="施工订单" title-size="36" title-color="#333"></u-navbar>
        <view class="tabsView">
          <u-tabs-swiper
            ref="uTabs"
            :list="tabsList"
            :current="current"
            @change="tabsChange"
            :is-scroll="false"
            :show-bar="false"
            active-color="#0F76BC"
            swiper-width="750"
          >
          </u-tabs-swiper>
        </view>
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
      </view>
      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item v-for="(item, index2) in tabsList" :key="index2" class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList[index2]"
            @query="queryList"
            :fixed="true"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无订单数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="view-list">
              <view
                class="info_box"
                @click="
                  routeTo(
                    '/other/construction-detail/construction-detail?isShowMobile=true&id=' + item.id
                  )
                "
                v-for="(item, index) in itemList[index2]"
                :key="index"
              >
                <view class="info_box-top">
                  <view class="info_box-title">
                    {{ item.name }}
                  </view>

                  <text v-if="item.status == 0" class="info_box-title-right">待支付</text>
                  <text v-if="item.status == 10" class="info_box-title-right"
                    >已报名，待需求方选中</text
                  >
                  <text
                    v-else-if="item.status == 30 && item.supplierUserId == userId"
                    class="info_box-title-right"
                    >已选中</text
                  >
                  <text
                    v-else-if="item.status == 30 && item.supplierUserId != userId"
                    class="info_box-title-right"
                    >很遗憾，未选中</text
                  ><!-- <text v-else-if="item.status == 3" class="info_box-title-right">施工中</text> -->
                  <!-- <text v-else-if="item.status == 4 || item.status == -2" class="info_box-title-right">待验收</text> -->
                  <text v-else-if="item.status == 41" class="info_box-title-right">未合作</text>
                  <text v-else-if="item.supplierStatus == 10" class="info_box-title-right"
                    >已磋商</text
                  >
                  <text v-else-if="item.status == 71" class="info_box-title-right">已终止</text>
                  <!-- <view v-else-if="item.supplierStatus == -1" class="info_box-title-right">
										<view class="">
											和遗憾，未入选
										</view>
										<p style="color:#FF2D22">(报名费已退回)</p>
									</view> -->
                </view>

                <!-- <view v-if="item.supplierStatus == 1" class="warning">
									如果施工方没有选中您进行合作，将自动退回报名费
								</view> -->

                <view class="info_box-desc-time">
                  <view class="info_box-desc"> 项目要求：{{ item.requireCondition }} </view>
                  <!-- <view class="info_box-desc">
										入场日期：{{formatTime(item.exceptStartTime)}}
									</view>	 -->
                  <view class="info_box-time">
                    项目预算：<text>¥{{ (item.budgetPrice * 0.01).toFixed(2) }}</text>
                  </view>
                </view>

                <!-- <view class="price-box">
									<view class="price-item">
										<view class="">
											¥{{(item.budgetPrice * 0.01).toFixed(2)}}
										</view>
										<p>项目报价</p>
									</view>
									<view class="price-item">
										<view class="">
											¥{{(item.depositPrice * 0.01).toFixed(2)}}
										</view>
										<p>保证金</p>
									</view>
								</view> -->
                <!-- <view v-if="item.status == 2" class="floor-desc">
									注：超时不处理将扣除部分保证金
								</view> -->

                <!-- <view v-if="item.status == 30 && item.supplierUserId == userId" class="" style="display: flex;">
									<view class="" style="flex: 1;">

									</view>
									<view @click.stop.prevent="routeTo('/other_center/con-team-orders-handle/con-team-orders-handle?id=' + item.id, 1)"  class="info-floor-btn" style="color:#8CC340;border: #8CC340 solid 2rpx;">
										未合作申请退款
									</view>
									<view  class="info-floor-btn" style="background-color: #008ED6;" @click.stop.prevent="onConfirm(item)">
										已磋商确认合作
									</view>
								</view> -->

                <!-- <view class="info-floor" v-if="item.status == 2">
									<view class="floor-desc">
										剩余时间1天16时32分50秒
									</view>

								</view> -->

                <!-- <view class="info-floor" v-if="item.status == -2">
									<view class="floor-desc">

									</view>
									<view @click.stop.prevent="routeTo('/other_center/con-team-orders-handle/con-team-orders-handle', 2)"  class="info-floor-btn" style="color:#8CC340;border: #8CC340 solid 2rpx;">
										争议申诉
									</view>
									<view @click.stop.prevent="routeTo('/other_center/con-team-orders-handle/con-team-orders-handle', 3)"  class="info-floor-btn" style="background-color: #008ED6;" >
										重新申请验收
									</view>
								</view> -->
                <u-gap height="20" bg-color="#F0F1F2"></u-gap>
              </view>
            </view>
          </z-paging>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      scurrent: 0,
      // 施工  0-待支付、1-已支付、2-已接单、3-已拒绝合作、4-接单超时、10-已申请验收、20-已申诉
      //status  0-待支付、10-报名中、20-已选定、30-接单中、40-建设中、41-整改中、50-验收中、70-已完成、71-已终止
      //0-全部、1-待付款、2-待选定、3-已选定、4-已磋商、5-未合作
      tabsList: [
        {
          name: '全部',
          status: 0
        },
        {
          name: '待付款',
          status: 1
        },
        {
          name: '待选中',
          status: 2
        },
        {
          name: '已选中',
          status: 3
        },
        {
          name: '已磋商',
          status: 4
        },
        {
          name: '未合作',
          status: 5
        }
      ],
      itemList: [[], [], [], [], []],
      order_id: '',
      userId: ''
    }
  },
  onLoad(res) {
    this.userId = uni.getStorageSync('userInfo').id

    this.queryList()
  },
  computed: {
    formatTime() {
      return (e) => this.$utils.parseTime(e)
    }
  },
  methods: {
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      if (this.itemList[this.current].length == 0) {
        this.queryList()
      }
    },
    queryList(pageNo = 1, pageSize = 10) {
      this.$u
        .get(
          `/app-api/construction/project-info/my-participate-page?pageNo=${pageNo}&pageSize=${pageSize}&tabType=${
            this.tabsList[this.current].status
          }`
        )
        .then((res) => [this.$refs.paging[this.current].complete(res.data.list)])
    },
    onOrderCancel(item) {
      let self = this
      uni.dialog.confirm('温馨提示', '确定要取消订单吗？', () => {
        self.$u.api.setOrderCancel(item.id).then((res) => {
          self.$u.toast('取消成功')
          setTimeout(function () {
            self.onOrderLoad(self.current, null, true)
          }, 500)
        })
      })
    },
    onOrderPayment(item) {
      let self = this
      // self.$u.api.setTestPayments({
      // 	order_no: item.order_no,
      // 	openid: uni.getStorageSync('openid')
      // }).then(res => {
      // 	setTimeout(function() {
      // 		self.onOrderLoad(self.current, null, true);
      // 	}, 500);
      // });
      this.$utils.route({
        url: '/goods/payment/payment',
        params: {
          order_id: item.id,
          money: item.pay_price,
          total_weight: item.total_weight,
          delivery_price: item.delivery_price
        }
      })
    },
    onOrderConfrim(item) {
      let self = this
      uni.dialog.confirm('温馨提示', '该订单确认收货吗？', () => {
        self.$u.api.setOrderConfirm(item.id).then((res) => {
          self.$u.toast('收货成功')
          setTimeout(function () {
            self.onOrderLoad(self.current, null, true)
          }, 500)
        })
      })
    },
    onResellPush(item) {
      this.$utils.route({
        url: '/goods/resell-push/resell-push',
        params: {
          id: item.id
        }
      })
    },
    onPushComment(item) {
      this.$utils.route({
        url: '/other/push-comment/push-comment',
        params: {
          id: item.id
        }
      })
    },
    onOrderDetail(item) {
      // this.$utils.route({
      // 	url: '/pages/order-details/order-details',
      // 	params: {
      // 		id: item.id
      // 	}
      // });
    },

    onConfirm(e) {
      uni.dialog.confirm('温馨提示', '确认与需求方成功磋商？', () => {
        this.$u
          .put('/app-api/construction/project-info/supplier-accept', {
            projectId: e.id
          })
          .then((res) => {
            this.queryList()
          })
      })
    },
    routeTo(url, status) {
      uni.navigateTo({
        url: url + '&status=' + status
      })
    }
  }
}
</script>

<style scoped>
page {
  height: 100%;
  background: #f2f2f2;
}

.view-list {
  padding: 20rpx;
}

.info_box {
  width: 710rpx;
  background-color: #ffffff;
  padding: 15rpx;
}

.info_box-top {
  display: flex;
  align-items: center;
}

.info_box-title {
  font-weight: 700;
  margin: 15rpx 0;
  flex: 1;
}

.rectification {
  padding: 10rpx 20rpx;
  background-color: #f5e1df;
  color: #f54831;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 30rpx;
}

.info_box-desc-time {
  margin-bottom: 20rpx;
  line-height: 43rpx;
  font-size: 32rpx;
}
.info_box-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info_box-address {
  font-size: 27rpx;
  color: #666666;
}

.info-floor {
  display: flex;
  margin: 15rpx 0;
  font-size: 26rpx;
  color: #999999;
}
.floor-desc {
  font-size: 26rpx;
  color: #ff2d22;
  flex: 1;
}

.info_box-top-left {
  position: relative;
  line-height: 46rpx;
}
.info-floor-right {
  position: absolute;
  top: 0;
  right: 2rpx;
}
.info-top-left-price {
  color: #f54831;
  margin-left: 10rpx;
}
.info-top-left-tip {
  display: inline-block;
  font-size: 23rpx;
  border: #0f76bc solid 1px;
  color: #0f76bc;
  padding: 0 5rpx;
}

.info-floor-btn {
  display: inline-block;
  padding: 8rpx 20rpx;
  color: #ffffff;
  border-radius: 30rpx;
  margin: 0 8rpx;
}

.box-title {
  display: flex;
  flex-direction: row-reverse;
}

.info_box-title-right {
  font-size: 24rpx;
  color: #0f76bb;
}

.price-box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #eeeeef;
  height: 130rpx;
}
.price-item view {
  text-align: center;
  font-size: 30rpx;
}
.price-item view {
  text-align: center;
  font-size: 30rpx;
}
.price-item p {
  text-align: center;
  font-size: 24rpx;
  color: #666666;
}
.warning {
  padding: 20rpx;
  background-color: #f5e8e6;
  color: #f54831;
  font-size: 26rpx;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>
